<template>
	<view class="" style="background: #ffffff;">
		<NavTitle :backgroundColor='backgroundColor' @leftClick="leftClick" jContent='flex-start' MarginTop='30'>
			<view slot="center" class="serach_top" :style="{height:titleHeight+'px'}">
				<view class="bar_input flex_dq">
					<image class="sms" :src="baseUrl + '/static/icon/i_search.png'"
						mode="aspectFill">
					</image>
					<text class="camouflage" @click="goSearch">请输入</text>
				</view>
			</view>
		</NavTitle>

		<view class="classify">
			<u-scroll-list style="position: relative;">
				<view class="flex_ZC classify_item" v-for="(item,index) in oneLevelList" :key="index"
					@click="selectClassify(item,index)">
					<image class="classify_img" v-if="indexs!=index" :src="item.unchecked_icon" mode="aspectFill">
					</image>
					<image class="classify_img" v-else :src="item.checked_icon" mode="aspectFill"></image>
					<text class="classify_title c6 f24" :class="{ active: indexs==index}">{{item.name}}</text>
				</view>
			</u-scroll-list>
			<view class="flex_ZC classify_all" v-if="oneLevelList.length>5" @click="phoneShow=true">
				全部
				<image :src="baseUrl + '/static/image/allmore.png'" mode="aspectFill"
					style="width:20rpx;height: 16rpx;">
				</image>
			</view>

		</view>
		<u-popup :show="phoneShow" mode="top" @close="phoneShow = false" bgColor="#ffffff">

			<NavTitle :backgroundColor='backgroundColor' @leftClick="leftClick" jContent='flex-start' MarginTop='30'>
				<view slot="center" class="serach_top" :style="{height:titleHeight+'px'}">
					<view class="bar_input flex_dq">
						<image class="sms" :src="baseUrl + '/static/icon/i_search.png'"
							mode="aspectFill">
						</image>
						<text class="camouflage" @click="goSearch">请输入</text>
					</view>
				</view>
			</NavTitle>
			<view class="classifyAlls">
				<view class="flex_ZC classify_item" v-for="(item,index) in oneLevelList" :key="index"
					@click="selectClassify(item,index)">
					<image class="classify_img" v-if="indexs!=index" :src="item.unchecked_icon" mode="aspectFill">
					</image>
					<image class="classify_img" v-else :src="item.checked_icon" mode="aspectFill"></image>
					<text class="classify_title c6 f24" :class="{ active: indexs==index}">{{item.name}}</text>
				</view>
				<view class="f26 c9 closeBtn" @click="phoneShow= false">
					点击收起
				</view>
			</view>
		</u-popup>
		<view class="" style="display: flex;">
			<view class="classify_left" style="width: 184rpx;">
				<u-list @scrolltolower="scrolltolower" :height='height'>
					<u-list-item v-for="(item, index) in twoLevelList" :key="index">
						<view :class="{ active1: index1==index}">
							<u-cell :title="item.name" :border='false' @click="select2(item,index)"></u-cell>
						</view>

					</u-list-item>
				</u-list>
			</view>
			<view class="shopList">
				<u-list @scrolltolower="scrolltolower1" :height='height'>
					<u-list-item v-for="(item, index) in goodsList" :key="index">
						<view class="flex_dq goods_item" @click="goDetails(item.id)">
							<image :src="item.thumb" mode="aspectFill"
								style="width:148rpx;height: 148rpx;margin-right: 14rpx;"></image>
							<view class="">
								<view class="f28 goods_name">
									{{item.name}}
								</view>
								<view class="flex_ld">
									<view class="f24 c9">
										<text class="f32 c4">￥{{item.min_price}}</text>
										<text class="delect"
											v-if="Number(item.max_origin_price) > Number(item.min_price)">￥{{item.max_origin_price}}</text>
									</view>
									<image :src="baseUrl + '/static/image/addCar.png'" mode="aspectFill"
										@click.stop="joincar(item)" style="width: 48rpx;height: 48rpx;"></image>
								</view>
							</view>
						</view>

					</u-list-item>
					<noDatas :xxxList="goodsList" :status="status"></noDatas>
				</u-list>
			</view>
		</view>
		<view class="cart flex_c" v-if="carAllNumber>0">
			<view class="cart_box flex_dq" @click="goShopCart">
				<image :src="baseUrl + '/static/icon/i_gwc.png'" mode="aspectFill"></image>
				<u-badge max="99" absolute :value="carAllNumber" :offset="offset"></u-badge>
			</view>
		</view>
		<u-popup :show="imageShow" mode="center" bgColor="#000" zIndex="100076" @close="imageShow = false" closeable>
			<view class="imagwrap" @click.stop="imageShow=false">
				<image :src="skuDetail.image" mode="widthFix"></image>
			</view>
		</u-popup>
		<u-popup :show="cartShow" mode="bottom" bgColor="#ffffff" :safeAreaInsetBottom='safeAreaInsetBottom' round='15'
			@close="cartShow = false">
			<view class="cartment flex_ZC">
				<view class="commodity">
					<view class="commodity_top flex_dq">
						<view class="goodsimg flex_c">
							<image :src="skuDetail.image" mode="aspectFill" @click.stop="imageShow=true"></image>
						</view>
						<view class="goods_r flex_Z">
							<view class=" flex_dq">
								<text class="f36 c4">￥</text>
								<text class="f44 c4 fw6">{{skuDetail.price}}</text>
							</view>
							<view class="mart14">
								<text class="f32 c3 overflow2">{{skuDetail.goods_name}}</text>
							</view>
						</view>
					</view>
					<view>
						<view class="mart28 flex_Z" v-for="(item,index) in specList" :key="index">
							<text class="f30 c3">{{item.name}}</text>
							<view class="mart14 display1">
								<text class="specific" :class="item2.selected==1?'active2':''"
									v-for="(item2,index2) in item.value" :key="index2"
									@click="changeScale(item2,index)">{{item2.name}}</text>
							</view>
						</view>
					</view>
					<view class="number_bpx flex_ld">
						<text class="f30 c3">购买数量</text>
						<u-number-box v-model="cartNumber" inputWidth="24" buttonSize="24" bgColor="#ffffff"
							@overlimit="overlimit" @change="valChange"></u-number-box>
					</view>
				</view>

				<view class="empty4"></view>
				<view class="empty4"></view>
				<view class="settlement lint flex_c">
					<text class="cart_btn" @click="cilckAartAdd">确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		cloudCategory,
		categoryList,
		cloudList,
		cloudDetail,
		trial,
		lastOrderAddress
	} from "@/api/cloudMall.js"
	import {
		cartAdd,
		cartTotalNum
	} from "../../api/shoppingCart.js"
	export default {
		// 页面滚动
		onPageScroll: function(e) {
			const scrollTop = e.scrollTop; // 获取页面滚动位置
			// 根据滚动位置修改状态栏样式
			if (scrollTop > 20) {
				this.backgroundColor = '#ffffff';
			} else {
				this.backgroundColor = '';
			}
			// console.log("滚动距离为：" + e.scrollTop);
		},
		data() {
			return {
				indexs: 0,
				index1: 0,
				page: 1,
				size: 10,
				phoneShow: false,
				tabId: "",
				cartShow: false,
				backgroundColor: '',
				goodsSku: [], //sku列表
				baseUrl: this.$imageBaseUrl,
				height: "",
				status: "",
				cartNumber: 1,
				safeAreaInsetBottom: false, //底部兼容
				addressInfo: {}, //地址
				indicator: false,
				offset: [-8, 6], //购物车红点偏移量
				carAllNumber: 0, //购物车数量
				specList: [], //规格清单
				skuDetail: {}, //商品规格详情
				oneLevelList: [], //一级分类列表
				goodsList: [], //商品列表
				twoLevelList: [], //二级分类列表
				imageShow: false,
				titleHeight: 0, // 标题栏高度
			}
		},
		onLoad() {
			this.initCategory()
			this.initAddress()
			this.initCartTotal()
		},
		onShow() {
			if (uni.getStorageSync('replaceAddress')) {
				this.addressInfo = uni.getStorageSync('replaceAddress')
				console.log(11111, this.addressInfo);
				this.payShow = true
			}

			setTimeout(() => {
				let navbarInfo = JSON.parse(uni.getStorageSync("navbarInfo"))
				let windowsHeight = navbarInfo.windowHeight
				console.log(windowsHeight, 'windowsHeight1');
				const query = uni.createSelectorQuery();
				query
					.select(".classify_left")
					.boundingClientRect((data) => {
						console.log(data, 'windowsHeight1');
						this.height = windowsHeight - data.top
					})
					.exec();
			}, 1000)

		},
		onReady() {
			// #ifdef MP-ALIPAY || MP-WEIXIN
			let navbarInfo = JSON.parse(uni.getStorageSync("navbarInfo"))
			this.titleHeight = navbarInfo.titleHeight;
			// #endif
		},
		methods: {

			// 购物车数量
			initCartTotal() {
				cartTotalNum().then(res => {
					console.log('购物车', res)
					if (res.code == 1) {
						this.carAllNumber = res.data.total_num
					}
				})
			},
			// 去购物车
			goShopCart() {
				uni.navigateTo({
					url: '/pagesMy/cloudCat/shoppingCart'
				})

			},
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
			goSearch() {
				uni.navigateTo({
					url: "/pagesMy/cloudCat/secondLevelSearch?type=0"
				})
			},
			// 步进器
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			goDetails(id) {
				console.log(id);
				uni.navigateTo({
					url: '/pagesMy/cloudCat/goodsDetails?id=' + id
				})
			},
			// 分类
			initCategory() {
				console.log(123456, cloudCategory);
				cloudCategory().then(res => {
					console.log('分类', res)
					if (res.code == 1) {
						let data = res.data
						data.splice(0, 1)
						this.oneLevelList = data
						this.twoLevelList = data[0].children
						this.tabId = data[0].children[0].id
						this.getList()
					}
				})
			},
			// 多规格 单规格计算 取sku里面对应的id
			changeScale(item2, index) {
				this.specList[index].value.forEach((item3) => {
					item3.selected = 0
				})
				item2.selected = 1

				let temporary = [];
				this.specList.forEach((item, index) => {
					this.specList[index].value.forEach((item2) => {
						if (item2.selected) {
							temporary.push(item2.name)
						}
					})
				})

				let result = temporary.join('@')
				this.goodsSku.forEach((item) => {
					if (item.spec_name == result) {
						this.skuDetail = item
					}
				})
				this.obtainMoney()
			},
			// 获取上次用户地址
			initAddress() {
				lastOrderAddress().then(res => {
					console.log('地址', res)
					if (res.code == 1) {
						this.addressInfo = res.data
					}
				})
			},
			// 订单试算
			obtainMoney() {
				let goods = [{
					sku_id: this.skuDetail.id,
					number: this.cartNumber,
				}];
				let data = {
					type: '1',
					goods: goods,
					is_money: this.isMoney ? 1 : 0,
					address_id: this.addressInfo.id,
				}
				trial(data).then(res => {
					console.log('获取价格', res)
				})
			},
			// 购物车添加
			cilckAartAdd() {
				if (uni.getStorageSync('token')) {
					let data = {
						sku_id: this.skuDetail.id,
						number: this.cartNumber,
					}
					cartAdd(data).then(res => {
						console.log('添加', res)
						if (res.code == 1) {
							this.cartShow = false
							uni.$u.toast(res.msg)
							this.initCartTotal()
						}
					})
				} else {
					uni.navigateTo({
						url: '/pageLogin/login/login'
					})
				}
			},
			joincar(item) {


				if (item.is_virtual == 1) {
					uni.$u.toast("虚拟产品不能加入购物车")
				} else {
					const data = {
						id: item.id
					}
					cloudDetail(data).then(res => {
						console.log('详情', res)
						if (res.code == 1) {
							this.specList = res.data.spec_list
							this.goodsSku = res.data.sku_list
							this.skuDetail = res.data.sku_list[0]
							this.specList.forEach((item, index) => {
								item.value.forEach((item2, index2) => {
									if (index2 == 0) {
										item2.selected = 1
									}
								})
							})
							this.cartShow = true
						}
					})
					// 
				}
			},
			selectClassify(item, index) {
				console.log(item, index);
				this.indexs = index
				this.tabId = item.children[0].id
				this.twoLevelList = item.children
				this.page = 1
				this.index1 = 0
				this.phoneShow = false
				this.getList()
			},
			// 二级分类
			clickTabs(e) {
				this.currentIndex = e.index
				this.goodsList = []
			},
			getList() {
				let data = {
					page: this.page,
					page_size: this.size,
					category_id: this.tabId,
					mask: 1,

				};
				cloudList(data).then(res => {
					let list = res.data.data;
					this.goodsList = this.page == 1 ? list : this.goodsList.concat(list);
					if (list.length < this.size) this.status = 'nomore';
					else this.status = 'loading';
				})
			},

			scrolltolower1() {
				console.log("触底了触底了");
				if (this.status == 'loading') {
					this.page++
					this.getList()
				}

			},
			scrolltolower() {

			},

			select2(item, index) {
				console.log(item, index);
				if (index != this.index1) {
					this.page = 1
					this.tabId = item.id
					this.index1 = index
					console.log(this.index1);
					this.getList()
				}

			},
		}

	}
</script>

<style lang="scss" scoped>
	.classify {
		position: relative;
		padding: 0 30rpx;
		margin-top: 30rpx;
		padding-right: 30rpx;
		z-index: 99;

		.classify_item {
			margin-right: 20rpx;

			image {
				width: 112rpx;
				height: 108rpx;
			}

			text {
				height: 40rpx;
				line-height: 40rpx;
				margin-top: -5rpx;
			}
		}
	}



	.classify_all {
		width: 30rpx;
		min-height: 138rpx;
		font-size: 28rpx;
		color: #3d3d3d;
		background: #ffffff;
		justify-content: space-evenly;
		position: absolute;
		right: 30rpx;
		top: 0rpx;

	}

	.custom_addrress {
		display: flex;
		align-items: center;
		font-size: 36rpx;
		z-index: 999;
		color: #FFFFFF;
		/* #ifdef MP-ALIPAY */
		margin-left: 30rpx;
		line-height: 88rpx;
		/* #endif */
	}

	.bar_input {
		position: relative;
		height: 64rpx;
		background: #ffffff;
		border-radius: 40rpx;
		z-index: 15;
		/* #ifdef H5 */
		margin-left: 90rpx;
		/* #endif */
		/* #ifdef MP-ALIPAY */
		width: 50%;
		// display: flex;
		// align-items: center;
		/* #endif */

	}

	.bar_input::before {
		content: '';
		position: absolute;
		top: 18rpx;
		left: 70rpx;
		transform: translateX(-50%);
		height: 30rpx;
		width: 2rpx;
		background: #E5E5E5;
	}

	.sms {
		width: 32rpx;
		height: 30rpx;
		margin-left: 26rpx;
	}

	.camouflage {
		/* #ifdef MP-WEIXIN||MP-ALIPAY */
		width: 240rpx;
		/* #endif */
		/* #ifdef H5 */
		width: 400rpx;
		/* #endif */
		margin-left: 36rpx;
		font-size: 28rpx;
		color: #999999;
	}

	.active {
		width: 112rpx;
		height: 42rpx;
		background: #FFC300;
		border-radius: 66rpx 66rpx 66rpx 66rpx;
		text-align: center;
		line-height: 42rpx;
		color: #3d3d3d;
		font-size: 24rpx;
		z-index: 999;
		// position: absolute;
		// top: 100rpx;
	}



	.classify_left {
		background: #F5F5F5;
		height: auto;

		.u-list {

			height: auto !important;

		}
	}


	.classify {
		.u-scroll-list {
			padding-right: 30rpx;
		}

		.u-scroll-list__scroll-view__content {
			position: relative;
		}
	}

	.active1 {
		background-color: #ffffff !important;
		// background: #ffffff !important;
	}

	.goods_item {
		// width: 518rpx;
		height: 148rpx;
		margin-left: 20rpx;
		margin-bottom: 32rpx;
	}

	.goods_name {
		width: 350rpx;
		color: #3D3D3D;
		// min-height: 84rpx;
		/* margin-bottom: 14rpx; */
		font-weight: 400;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	// /deep/.uni-scroll-view-content {
	// 	width: 538rpx !important;
	// 	// margin-left: 20rpx;
	// }
	.shopList {
		width: 538rpx !important;
	}

	/* #ifdef MP-ALIPAY */


	.nodata {
		width: 538rpx !important;
	}

	/* #endif */


	/deep/.u-scroll-list__indicator {
		display: none !important;
		margin-top: 0 !important;
	}

	/deep/.u-cell__title-text {
		font-size: 26rpx !important;
		color: #3d3d3d !important;
	}

	.allclassify {
		position: absolute;
		top: 84rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 40rpx 40rpx;
		z-index: 100;
	}

	.closeBtn {
		width: 100%;
		text-align: center;
		margin: 30rpx 0;
	}

	.classifyAlls {
		display: flex;
		width: 100%;
		padding: 0 48rpx 0 54rpx;
		flex-wrap: wrap;
		align-items: center;
		z-index: 9999999;

		.classify_item {
			margin: 20rpx 8rpx;

			image {
				width: 112rpx;
				height: 108rpx;
			}
		}
	}

	/deep/.u-popup__content {
		width: 100%;
		background: #ffffff !important;
		// position: absolute;
		// top: 84rpx;
		border-radius: 0rpx 0rpx 40rpx 40rpx;
	}

	.commodity {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 24rpx 0;
		padding: 24rpx;
	}

	.goodsimg>image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx;
	}

	.goods_r {
		margin-left: 30rpx;
	}

	.mart14 {
		margin-top: 14rpx;
	}

	.mart28 {
		margin-top: 28rpx;
	}

	.display1 {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.specific {
		padding: 4rpx 26rpx;
		border-radius: 40rpx;
		border: 2rpx solid #f0f0f0;
		background: #f0f0f0;
		font-size: 28rpx;
		color: #666666;
		margin-right: 26rpx;
		margin-bottom: 20rpx;
	}

	.active2 {
		border: 2rpx solid #FFC300 !important;
		color: #FFC300 !important;
		background: #ffffff !important;
	}

	.number_bpx {
		padding: 10rpx 0;
	}

	.settlement {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 142rpx;
		background: #FFFFFF;
		padding: 0 30rpx;
	}

	.serach_top {
		display: flex;
		align-items: center;
	}

	.xuanze {
		width: 100%;
	}

	.lint {
		border-top: 1rpx solid #F2F2F2;

	}

	.cart_btn {
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #FFC300;
		font-size: 32rpx;
		color: #ffffff;
		border-radius: 40rpx;
	}

	.cart {
		position: fixed;
		bottom: 200rpx;
		right: 30rpx;
		width: 96rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 50%;
		z-index: 3;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	}

	.cart_box {
		position: relative;
		width: 100%;
		height: 1005;
		/* background: pink; */
	}

	.cart_box>image {
		width: 36rpx;
		height: 36rpx;
		margin-left: 28rpx;
	}

	.imagwrap {
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;

		>image {
			width: 100%;
		}
	}

	/deep/.u-safe-bottom {
		padding-bottom: 0 !important;
	}

	/deep/.u-list-item {
		width: 100% !important;
	}
</style>